<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="请选择统计类型">
        <el-select v-model="searchObj.type" placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"></el-option>
          <el-option label="学员注册数统计" value="register_num"></el-option>
          <el-option label="课程播放数统计" value="video_view_num"></el-option>
          <el-option label="每日课程数统计" value="course_num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始时间"
        ></el-date-picker>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="showChart"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import statisticsAPI from "@/api/statistics";
export default {
  data() {
    return {
      searchObj: {},
      xData: [],
      yData: [],
    };
  },
  methods: {
    showChart() {
      //获取查询参数，调用统计API获取数据
      statisticsAPI.getData(this.searchObj).then((res) => {
        this.xData = res.data.xData;
        this.yData = res.data.yData;
        this.setChart();
        console.log(1);
      });
    },
    setChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: this.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.yData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },

  created() {},
  mounted() {},
};
</script>

